/**
 * K线图
 * CandlestickChartsC (reactCharts)
 * @author zhy
 * @date  2021-03-16
 */
import React from 'react';
import { FirstHeaderC, SecondHeaderC, CandlestickChartsC } from '../../components';
import { Row, Col, Button } from 'antd';
import { cloneDeep } from 'lodash';

class CandlestickChartsCDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data1: [
        { time: '2013/1/24', open: 2320.26, close: 2320.26, lowest: 2287.3, highest: 2362.94 },
        { time: '2013/1/25', open: 2300, close: 2291.3, lowest: 2288.26, highest: 2308.38 },
        { time: '2013/1/28', open: 2295.35, close: 2346.5, lowest: 2295.35, highest: 2346.92 },
        { time: '2013/1/29', open: 2347.22, close: 2358.98, lowest: 2337.35, highest: 2363.8 },
        {
          time: '2013/1/30',
          open: 2360.75,
          close: 2382.48,
          lowest: 2347.89,
          highest: 2383.76,
          trading: [
            { type: '买', value: 2360 },
            { type: '买', value: 2361 },
            { type: '买', value: 2362 },
            { type: '买', value: 2363 },
            { type: '买', value: 2364 },
            { type: '买', value: 2365 },
            { type: '买', value: 2366 },
            { type: '买', value: 2367 },
            { type: '买', value: 2368 },
            { type: '买', value: 2369 },
            { type: '买', value: 23610 },
            { type: '买', value: 23611 },
            { type: '卖', value: 2380 },
            { type: '卖', value: 2381 },
            { type: '卖', value: 2382 },
            { type: '卖', value: 2383 },
            { type: '卖', value: 2384 },
            { type: '卖', value: 2385 },
            { type: '卖', value: 2386 },
            { type: '卖', value: 2387 },
            { type: '卖', value: 2388 },
            { type: '卖', value: 2389 },
            { type: '卖', value: 23810 },
            { type: '卖', value: 23811 },
          ],
        },
        { time: '2013/1/31', open: 2383.43, close: 2385.42, lowest: 2371.23, highest: 2391.82 },
        { time: '2013/2/1', open: 2377.41, close: 2419.02, lowest: 2369.57, highest: 2421.15 },
        { time: '2013/2/4', open: 2425.92, close: 2428.15, lowest: 2417.58, highest: 2440.38 },
        { time: '2013/2/5', open: 2411, close: 2433.13, lowest: 2403.3, highest: 2437.42 },
        { time: '2013/2/6', open: 2432.68, close: 2434.48, lowest: 2427.7, highest: 2441.73 },
        {
          time: '2013/2/7',
          open: 2430.69,
          close: 2418.53,
          lowest: 2394.22,
          highest: 2433.89,
          trading: [
            { type: '买', value: 2360 },
            { type: '卖', value: 2380.12 },
          ],
        },

        { time: '2013/2/8', open: 2416.62, close: 2432.4, lowest: 2414.4, highest: 2443.03 },
        { time: '2013/2/18', open: 2441.91, close: 2421.56, lowest: 2415.43, highest: 2444.8 },
        { time: '2013/2/19', open: 2420.26, close: 2382.91, lowest: 2373.53, highest: 2427.07 },
        { time: '2013/2/20', open: 2383.49, close: 2397.18, lowest: 2370.61, highest: 2397.94 },
        {
          time: '2013/2/21',
          open: 2378.82,
          close: 2325.95,
          lowest: 2309.17,
          highest: 2378.82,
          trading: [
            { type: '买', value: 2360 },
            { type: '卖', value: 2380.12 },
          ],
        },
        { time: '2013/2/22', open: 2322.94, close: 2314.16, lowest: 2308.76, highest: 2330.88 },
        { time: '2013/2/25', open: 2320.62, close: 2325.82, lowest: 2315.01, highest: 2338.78 },
        { time: '2013/2/26', open: 2313.74, close: 2293.34, lowest: 2289.89, highest: 2340.71 },
        { time: '2013/2/27', open: 2297.77, close: 2313.22, lowest: 2292.03, highest: 2324.63 },
        { time: '2013/2/28', open: 2322.32, close: 2365.59, lowest: 2308.92, highest: 2366.16 },

        { time: '2013/3/1', open: 2364.54, close: 2359.51, lowest: 2330.86, highest: 2369.65 },
        { time: '2013/3/4', open: 2332.08, close: 2273.4, lowest: 2259.25, highest: 2333.54, trading: [{ type: '买', value: 2360 }] },
        { time: '2013/3/5', open: 2274.81, close: 2326.31, lowest: 2270.1, highest: 2328.14 },
        { time: '2013/3/6', open: 2333.61, close: 2347.18, lowest: 2321.6, highest: 2351.44 },
        { time: '2013/3/7', open: 2340.44, close: 2324.29, lowest: 2304.27, highest: 2352.02 },
        { time: '2013/3/8', open: 2326.42, close: 2318.61, lowest: 2314.59, highest: 2333.67 },
        { time: '2013/3/11', open: 2314.68, close: 2310.59, lowest: 2296.58, highest: 2320.96, trading: [{ type: '卖', value: 2380.12 }] },
        { time: '2013/3/12', open: 2309.16, close: 2286.6, lowest: 2264.83, highest: 2333.29 },
        { time: '2013/3/13', open: 2282.17, close: 2263.97, lowest: 2253.25, highest: 2286.33 },
        { time: '2013/3/14', open: 2255.77, close: 2270.28, lowest: 2253.31, highest: 2276.22 },

        { time: '2013/3/15', open: 2269.31, close: 2278.4, lowest: 2250, highest: 2312.08 },
        { time: '2013/3/18', open: 2267.29, close: 2240.02, lowest: 2239.21, highest: 2276.05 },
        { time: '2013/3/19', open: 2244.26, close: 2257.43, lowest: 2232.02, highest: 2261.31 },
        { time: '2013/3/20', open: 2257.74, close: 2317.37, lowest: 2257.42, highest: 2317.86 },
        { time: '2013/3/21', open: 2318.21, close: 2324.24, lowest: 2311.6, highest: 2330.81 },
        { time: '2013/3/22', open: 2321.4, close: 2328.28, lowest: 2314.97, highest: 2332 },
        { time: '2013/3/25', open: 2334.74, close: 2326.72, lowest: 2319.91, highest: 2344.89 },
        { time: '2013/3/26', open: 2318.58, close: 2297.67, lowest: 2281.12, highest: 2319.99 },
        { time: '2013/3/27', open: 2299.38, close: 2301.26, lowest: 2289, highest: 2323.48 },
        { time: '2013/3/28', open: 2273.55, close: 2236.3, lowest: 2232.91, highest: 2273.55 },

        { time: '2013/3/29', open: 2238.49, close: 2236.62, lowest: 2228.81, highest: 2246.87 },
        { time: '2013/4/1', open: 2229.46, close: 2234.4, lowest: 2227.31, highest: 2243.95 },
        { time: '2013/4/2', open: 2234.9, close: 2227.74, lowest: 2220.44, highest: 2253.42 },
        { time: '2013/4/3', open: 2232.69, close: 2225.29, lowest: 2217.25, highest: 2241.34 },
        { time: '2013/4/8', open: 2196.24, close: 2211.59, lowest: 2180.67, highest: 2212.59 },
        { time: '2013/4/9', open: 2215.47, close: 2225.77, lowest: 2215.47, highest: 2234.73 },
        { time: '2013/4/10', open: 2224.93, close: 2226.13, lowest: 2212.56, highest: 2233.04 },
        { time: '2013/4/11', open: 2236.98, close: 2219.55, lowest: 2217.26, highest: 2242.48 },
      ],
      data2: undefined,
      data3: undefined,
      data4: [],
    };

    setTimeout(() => {
      this.setState({
        data2: this.state.data1,
        data3: [],
      });
    }, 2000);
  }

  deleteMarketPointTradingField = () => {
    const dataCopy = cloneDeep(this.state.data1);
    dataCopy.map((v) => {
      if (v.trading) delete v.trading;
    });
    this.setState({
      data4: dataCopy,
    });
  };

  componentDidMount() {
    this.deleteMarketPointTradingField();
  }

  render() {
    return (
      <div>
        <FirstHeaderC title='echarts图' />
        <Row gutter={16}>
          <Col span={12}>
            <SecondHeaderC title='异步加载有数据' />
            <CandlestickChartsC height={400} data={this.state.data2} />
          </Col>
          <Col span={12}>
            <SecondHeaderC title='异步加载无数据' />
            <CandlestickChartsC height={400} data={this.state.data3} />
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <SecondHeaderC title='同步加载' />
            <CandlestickChartsC height={400} data={this.state.data1} />
          </Col>
          <Col span={12}>
            <SecondHeaderC title='无标注&左侧距离为150&右侧90&自定义的悬浮显示' />
            <CandlestickChartsC height={400} data={this.state.data4} gridLeft={150} gridRight={90} toolTipFormat={(v) => '自定义的显示'} />
          </Col>
        </Row>
        {/* <div style={{height:'500px',width:'800px',border:'1px solid red'}}>
              <iframe  src="https://blog.csdn.net/qq_37331119/article/details/78276481" scrolling='auto' name="mainWindow" height='100%' width='100%'></iframe>
            </div> */}
      </div>
    );
  }
}

export default CandlestickChartsCDemo;
